<template>
	<view>
		<u-navbar back-text="返回" :back-text-style="{color:color}" :is-back="true" title="北向资金"
		:background="background" :back-icon-color="color" :title-color="color">
		</u-navbar>
		
		<!-- 主体内容部分 -->
		<view style="margin-top: 20rpx;">
			<view class="wrap">
				<u-row gutter="32">
					<u-col span="4">
						<view class="border zj-box" style="background-color: #fff9f6;">
							<view class="title">北向资金流入</view>
							<view class="number">
								<text class="text-green" v-if="zjData.hk2 < 0">{{zjData.hk2}}亿元</text>
								<text class="text-red" v-if="zjData.hk2 > 0">{{zjData.hk2}}亿元</text>
		
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="border zj-box" style="background-color: #fff9f6;">
							<view class="title">沪股通流入</view>
							<!-- <view class="number">{{zjData.hk2sh}}亿元</view> -->
							<view class="number">
								<text class="text-green" v-if="zjData.hk2sh < 0">{{zjData.hk2sh}}亿元</text>
								<text class="text-red" v-if="zjData.hk2sh > 0">{{zjData.hk2sh}}亿元</text>
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="border zj-box" style="background-color: #fff9f6;">
							<view class="title">深股通流入</view>
							<view class="number">
								<text class="text-green" v-if="zjData.hk2sz < 0">{{zjData.hk2sz}}亿元</text>
								<text class="text-red" v-if="zjData.hk2sz > 0">{{zjData.hk2sz}}亿元</text>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			
			<view class="new-box">
				<view class="title">外资动向</view>
				<view class="list">
					<view v-for="(item,index) in list" :key="index"
					class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
						<view class="u-body-item-title">
							<view class="title-text u-line-3">{{item.title}}</view>
							<view class="time">{{ item.time }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {			
			return {
				background: {
					backgroundColor: 'rgb(222, 46, 46)',
				},
				color:"#fff",
				list: [],
				zjData:{
					hk2sh:'', //沪股通	
					hk2sz:'', //深股通
					hk2:'' //全部
				}
			}
		},
		methods: {
			getBxzj(){
				this.$Request.get(this.$api.index.bxzj_listdata).then(res => {
					if(res.code == 0){
						let data = res.data;
						this.zjData =data
					}
					
				})
			},
			getWzdx(){
				this.$Request.get(this.$api.index.wzdx_listdata).then(res => {
					if(res.code == 0){
						let data = res.data;
						console.log(data)
						this.list =data
					}
					
				})
			},
		},
		created() {
			this.getBxzj()
			this.getWzdx()
		}
	}
</script>

<style lang="scss" scoped>
	.zj-box{
		text-align: center !important;
		box-sizing: border-box;
		padding: 15rpx 10rpx 15rpx 10rpx;
		font-weight: bold;
		font-size: 30rpx;
		.title{
			margin: 0 0 8rpx 0;
		}
		.number{
			color: #e93f4a;
		}
	}
	.new-box{
		margin-top: 40rpx;
		box-sizing: border-box;
		padding: 16rpx;
		border-top: 1px solid #de2e2e;
		.u-body-item-title{
			position: relative;
			min-height: 78rpx;
			height: auto;
		}
		.title-text{
			margin-bottom: 40rpx;
		}
		.title{
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}
		.time{
			position: absolute;
			font-size: 24rpx;
			bottom: 0;
		}
	}
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 50rpx 10rpx 20rpx 10rpx;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
	.u-border-bottom:after{
		content: ' ';
		position: absolute;
		top: 0;
		pointer-events: none;
		box-sizing: border-box;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(0.5, 0.5);
		transform: scale(0.5, 0.5);
		border-bottom: 2rpx solid #212121;
		z-index: 2;
	}
	.text-red{
		color: #e93f4a;	
	}
	.text-green{
		color: #45c74f;
	}
</style>
